import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute } from 'react-router'
import View from 'lib/View.jsx'
import Layout from '../common/layout.jsx'
import RootView from './RootView.jsx'
import TraceView from './TraceView.jsx'
import ConfusedConfig from './ConfusedConfig.jsx'
import history from '../common/history.es6';

import './style.less';

class MainView extends View{
  render(){
    return (
      <Layout title="崩溃" subtitle="崩溃统计和详情" extra={
        BlueWare.platform === 'iOS'
          ? (<ConfusedConfig draggable={true} />)
          : null
      }>
        { React.cloneElement(this.props.children, { routeParams: this.props.params, key: this.getHandlerKey() }) }
      </Layout>
    )
  }
}

render((
  <Router history={ history }>
    <Route path="/" component={MainView} >
      <Route path="crashtrace/:crashtraceId" component={TraceView} />
      <IndexRoute component={RootView} />
    </Route>
  </Router>
), document.getElementById('root'));
